<template>
    <div class="upload-container">
        <div class="upload-item upload-img" @click="upload" v-if="maxCount>modelValue.length && !disabled">
            <img class="icon-camera" src="@/assets/images/camera.png"/>
        </div>
        <div class="upload-item" v-for="(item, index) in modelValue" :key="index">
            <img class="item-img" :src="item" @click="perview(index)" />
            <img v-if="!disabled" class="icon-delete" src="@/assets/images/delete.png" @click="deleteImg(index)"/>
        </div>
        
    </div>
</template>

<script setup lang='ts'>
import { showImagePreview } from 'vant';

const props = defineProps({
    disabled: {default: false},
    modelValue: {
        default: () => [],
    },
    maxCount: {default: 99}
})

const emit = defineEmits<{
    (e: 'update:modelValue', fileList: any[]): void
}>()


function perview(index:number) {
    showImagePreview({
        images: props.modelValue,
        startPosition: index,
    })
}
function deleteImg(index: number) {
    props.modelValue.splice(index, 1)
    emit('update:modelValue', props.modelValue)
}
function upload() {
    // call native take picture
    
}

</script>

<style scoped>
.upload-container{
  display: flex;
  flex-wrap: wrap;
  padding: 30px 30px;
}
.upload-item{
  /* width: 142px;
  height: 142px; */
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  margin: 0 20px 20px 0;
  position: relative;
}
.upload-img{
  background: #F8F8F8;
}
.icon-camera{
  width: 60px;
  height: 60px;
}
.item-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.icon-delete{
  width: 36px;
  height: 36px;
  padding: 10px;
  position: absolute;
  top: -23px;
  right: -23px;
  z-index: 1;
  background: #fff;
}
</style>